<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的资料</title>
    <meta charset="UTF-8">
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper">
<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>我的资料</h5>
        </div>
        <div class="ibox-content">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <form class="form-horizontal m-t" id="commentForm" autocomplete ="off">
                        <input type="hidden" th:value="${user.userId}" name="userId">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">姓名：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="realname" th:value="${user.realname}" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">邮箱：</label>
                            <div class="col-sm-8">
                                <input type="email" class="form-control" name="emailAddress" th:value="${user.emailAddress}" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码：</label>
                            <div class="col-sm-8">
                                <input id="password" name="password" class="form-control" type="password">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 至少8个字符，至少1个字母，1个数字和1个特殊字符</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">确认密码：</label>
                            <div class="col-sm-8">
                                <input id="confirm_password" name="confirm_password" class="form-control" type="password">
                                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">PIN：</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="pin" maxlength="6">
                            </div>
                        </div>
                        <div class="form-group form-button" >
                            <div class="col-sm-8 col-sm-offset-5">
                                <button class="btn btn-success" type="submit">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.js}"></script>
<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script th:inline="javascript">
    $(function(){
        // validate signup form on keyup and submit
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                realname: {
                    required: true,
                    maxlength: 20
                },
                password: {
                    required: true,
                    minlength: 8,
                    maxlength: 16
                },
                confirm_password: {
                    required: true,
                    minlength: 8,
                    maxlength: 16,
                    equalTo: "#password"
                },
                emailAddress: {
                    required: true,
                    email: true,
                    maxlength: 40
                },
                pin: {
                    required: true,
                    minlength: 6,
                    maxlength: 6
                }
            },
            messages: {
                realname: {
                    required:icon + "请输入你的姓",
                    maxlength: icon + "姓名最大长度为20个字符"
                },
                password: {
                    required: icon + "请输入您的密码",
                    minlength: icon + "密码必须8个字符以上",
                    maxlength: icon + "密码最大长度为16个字符"
                },
                confirm_password: {
                    required: icon + "请再次输入密码",
                    minlength: icon + "密码必须8个字符以上",
                    maxlength: icon + "密码最大长度为16个字符",
                    equalTo: icon + "两次输入的密码不一致"
                },
                emailAddress:{
                    required: icon + "请输入您的E-mail",
                    maxlength: icon + "E-mail最大长度为40个字符"
                },
                pin: {
                    required: icon + "请输入您的pin码",
                    minlength: icon + "PIN码长度为6个字符",
                    maxlength: icon + "PIN码长度为6个字符"
                }
            },
            submitHandler:function(form) {
                var data = $("#commentForm").serialize();
                $.ajax({
                    type:'post',
                    url:[[${ctx}]]+"/user/updateUser.do",
                    cache: false,
                    data:data,
                    dataType:'json',
                    success:function(data){
                        if(data.result){
                            parent.layer.msg('操作成功',{icon: 1});
                            window.location.reload();
                        }else{
                            parent.layer.msg('操作失败', {icon: 2});
                        }
                    }
                })
            }
        });

        //自定义正则表达示验证方法
        $.validator.addMethod("password",function(value,element,params){
            var password = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&_])[A-Za-z\d$@$!%*#?&_]{8,}$/;
            return this.optional(element)||(password.test(value));
        },"至少8个字符，至少1个字母，1个数字和1个特殊字符");
    });
</script>
</body>
</html>